<!DOCTYPE HTML>
<html>
    <HEAD>
    <TITLE>Float Bar</TITLE>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">        
        var isHidden = true;
        $(document).ready(function(){
                var yzhDay = 20;
                var yzhMon = 7;
                var today = new Date();
                
                    
                //Check if browser is IE 6
                if($.browser.msie && $.browser.version == 6) {
                    FollowDiv.follow();
                }

                if (today.getDate() != yzhDay || (today.getMonth()+1) != yzhMon)
                {
                    $("#floatBar").hide();
                }

                $("#hidePart").hide();
                $("#show").click(function(){
                    if (isHidden)
                    {
                        $("#hidePart").show("slow");
                        $("#show").html("<<<");
                        isHidden = false;
                    }
                    else
                    {
                        $("#hidePart").hide("slow");
                        $("#show").html(">>>");
                        isHidden = true;
                    }
                    


                 })

            });
        FollowDiv = {
            follow : function(){
                $("#floatBar").css('position', 'absolute');
                $(window).scroll(function(){
                        var f_top = $(window).scrollTop();
                        $('#floatBar').css('top', f_top);
                        });
                 }
        }
        
    </script>

    <style>
     #floatBar{
        filter = alpha(opacity=80);
        -moz-opacity = 0.8; 
        border:2px double #000000;
        position:fixed;
        left:0px;
        top:190px;
        height:0px;
        width:0px;
     }
        .style2
        {
            height: 450px;
        }
        .style3
        {
            height: 450px;
            width: 66px;
        }
             html, body, h1, form, fieldset, legend, ol, li {
    margin: 0;
    padding: 0;
    }
    
    header a, h2 a {
    background: #83AF9B;
    color: #666; font-style: normal; text-decoration: none;
    }
    
    
    
    body {
    background: #83AF9B;
    color: #111111;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding: 20px;
    }
    button#show {
    background: #384313;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 10px;
    color: #ffffff;
    font: 18px Georgia, "Times New Roman", Times, serif;
    letter-spacing: 1px;
    margin: auto;
    padding: 60px 15px;
    text-shadow: 0 1px 1px #000000;
    text-transform: uppercase;
    }

    button {
    background: #384313;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 10px;
    color: #ffffff;
    font: 18px Georgia, "Times New Roman", Times, serif;
    letter-spacing: 1px;
    margin: auto;
    padding: 20px 15px;
    text-shadow: 0 1px 1px #000000;
    text-transform: uppercase;
    }



    button:hover {
    background: #1e2506;
    cursor: pointer;
    }

    form input[type=radio] {
    float: left;
    margin-right: 5px;
    }

    input:not([type=radio]),
    textarea {
    background: #ffffff;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    font: italic 13px Georgia, "Times New Roman", Times, serif;
    outline: none;
    padding: 5px;
    width: 366px;
	height: 20px;
    }

    #result{
     background: #b9cf6a;
    background: rgba(255,255,255,.3);
    border-color: #e3ebc3;
    border-color: rgba(255,255,255,.6);
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;

    }


    </style>
</HEAD>

<body>
Hi~ Thanx for using my lil vocabulary tool. Input whatever you want to put in you mind and press the button <br>
e.g. TOEFL List 1 or GRE page 2,3,4<br>
    <form action='/yzh' method='get'>
        <input name='task' type='text'>
        <button type="submit" id = "send" >Go</button>
    </form>
<br>
This tool is a lil bit buggy, there are some knowing problems and ways to avoid them.<br>
1. Don't reload the page while submitting, it may add duplicate entries to your calendar.<br>
2. Some entries may not be able to add to your calendar, the failed entries will be listed and you can add them manually.<br>
3. Since the behavior of some browsers, an entry might be added twice, still have no way to solve this issue.</br> 
3. If u have any suggestions or found any bugs. please tell me. You know how to contact me~<br>
Enjoy!
    <div id = "floatBar">

        <table>
            <tr>
                <td class="style2">
                    <div id = "hidePart">  <img src="idCardEd.png"></img></div>
                </td>
                <td class="style3">
                    <button id="show">>>></button>
                </td>
            </tr>
        </table>

    </div>

</html>
</body>

